<template>
  <view class="content">
    <map :longitude="log" :latitude="lat" class="map" @markertap="goto" :markers="marker"></map>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import QQMapWX from '../../static/lib/qqmap-wx-jssdk.js';

const log = ref<number>(115.485013); // 确保是数值类型 38.814575,115.485013
const lat = ref<number>(38.814575); // 确保是数值类型
const marker = ref<any[]>([
  {
    id: 1,
    iconPath: '/static/lib/05.jpg', // 确保路径正确
    latitude: 38.814575, // 确保是数值类型
    longitude: 115.485013, // 确保是数值类型
    width: 40,
    height: 30,
  },
]);

const goto = () => {
  let plugin = requirePlugin('routePlan');
  let key = 'GAGBZ-ZNIL4-FMKU6-KHRJB-3QCNS-Y2BBI'; // 使用在腾讯位置服务申请的key
  let referer = '宇哥的地图'; // 调用插件的app的名称
  let endPoint = JSON.stringify({ // 终点
    name: '北京西站',
    latitude: 39.894806,
    longitude: 116.321592
  });
  uni.navigateTo({
    url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
  });
};

let qqmapsdk: any;

onLoad(() => {
  // 实例化API核心类
  qqmapsdk = new QQMapWX({
    key: 'GAGBZ-ZNIL4-FMKU6-KHRJB-3QCNS-Y2BBI'
  });
});

onShow(() => {
  // 调用接口
  qqmapsdk.search({
    keyword: '酒店',
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res);
    },
    complete: function (res) {
      console.log(res);
    }
  });
});
</script>

<style scoped lang="scss">
.content {
  .map {
    width: 100vw;
    height: 100vh;
  }
}
</style>